<template>
	<view style="background: #fff; width: 100%;height: auto;float: left;">
		<view class="cy_user t1" style="position: relative;overflow: hidden;">
			<view class="cy_user_tit t2">普通代理<br><text class="t15">{{num}}家</text></view>
			<image src="../../static/img/dianpu.png" mode="widthFix"
				style="position: absolute;top:3vw;opacity: 0.3;right: 0; width: 20vw;"></image>
			<!-- <view class="cy_user_tit t2">联盟已为您带来收益：<text class="t15">{{money}}</text>元</view> -->
		</view>
		<view class="cy_list">
			<view class="cy_list_tit t1"><text class="t22">普通代理列表</text></view>

			<!-- 			<view class="msg_list" @click="list(item.id)" v-for="(item,index) in msgs" :key="index">
			<view class="msg_list_tit"><text class="t1">{{item.title}}</text><text class="t5">{{item.addtime}}</text></view>
			</view> -->
			<!-- "userId": "1382258141337501697",
				"mchId": "1382258141337501697",
				"headUrl": "http://api.zhaocaiami.vworld365.com//images/20210614/25750dc3-e90c-43d1-a567-97bafbd30d1e.jpg",
				"mchName": "山东江泰钢材有限公司",
				"phone": "15166590913",
				"servicePhone": "13780701252" -->
			
			<view class="cy_li" v-if="list.length == 0">
				<empty des="暂无数据" margin-top="20"></empty>
			</view>
			<view class="cy_li" v-for="(item,index) in list" :key="index">
				 <!--  -->
				<view class="cy_img">
					<image :src="item.headUrl" mode="aspectFill"></image>
				</view>
				<!-- <image src="../../static/img/turn.png" mode="widthFix" class="cy_li_next"></image> -->
				<text class="cy_li_info t1">
					<span>
						{{item.name[0]}}
						<span>*</span>
						<span v-if="item.name.length >= 3">*</span>
					</span>
					<span class="btn-box">
						<button class="customStyle" size="mini" style="margin-right: 20rpx;" @click="xq(item)">代理详情</button>
						<button type="warn" size="mini" @click="shoplist(item)">所属商户</button>
					</span>
				</text>
				
				<text class="cy_li_info t1">
					<image src="../../static/img/kefu1.png" mode="widthFix"></image> {{item.phone || '' + '   ' + item.areaName}}
				</text>
				<view class="cy_sp">
					<view class="cy_sp_li">
						<text class="t1">商家数量</text>
						<text class="t5">{{item.mchs}}个</text>
					</view>
					<view class="cy_sp_li">
						<text class="t1">流水收益</text>
						<text class="t5">{{item.tradeInc / 100}}元</text>
					</view>
					<view class="cy_sp_li">
						<text class="t1">广告收益</text>
						<text class="t5">{{item.adInc / 100}}元</text>
					</view>
				</view>
			</view>

			<!-- <view class="zanwu t1" v-show="list.length==0" style="text-align: center;pa">暂无商户</view> -->
		</view>
		<!-- <view class="zanwu" v-show="jiazai" style="padding: 4vw 0;"><text class="t7">{{more}}</text></view>
		<view class="zanwu" v-show="zanwu" style="padding: 4vw 0;">
			<image src="../../static/img/zanwu.png" mode="widthFix" style="margin-left: 35vw;"></image><text
				class="t8">{{wu}}</text>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mainid: '',
				list: '',
				stats: '',
				tit: 0,
				money: 0,
				num: 0,
				pages: 1,
				ismore: true,
				more: '加载更多',
				jiazai: false,
				wu: "暂无数据",
				zanwu: false,
				level:''
			}
		},
		onLoad(param) {
			if(param && param.id){
				this.mainid = param.id;
				this.level= param.level;
				this.myTeam();
			}else{
				var _this = this;
				uni.getStorage({
					key: 'user',
					success: function(res) {
						// console.log(res);
						_this.mainid = res.data.id;
						_this.level=res.data.level;
						_this.myTeam();
					}
				});
			}
		},
		// 监听触底
		onReachBottom() {
			
		},
		methods: {
			xq(streeMsg) {
				uni.setStorageSync('streeDetailMessage', streeMsg);
				uni.navigateTo({
					url: '/pages/basedl/basedl-dtl'
				});
			},
			shoplist(streeMsg){
				uni.navigateTo({
					url: '/pages/tuandui/shanghu?id=' + streeMsg.agentId + '&level=' + streeMsg.level
					// url: '/pages/basedl/basedl?id=' + streeMsg.agentId + '&lever=' + streeMsg.level
				});
			},
			bd(e, id) {
				uni.navigateTo({
					url: '/pages/tuandui_bd_id/tuandui_bd_id?t=' + e + '&sid=' + id
				});
			},
			myTeam() {
				// console.log(this.token);
				uni.showLoading();
				var that = this;
				console.log(getApp().globalData.url + 'agent/getAgentTs/' + that.mainid);
				uni.request({
					header: {
						'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
					},
					url: getApp().globalData.url + 'agent/getAgentTs/' + that.mainid, //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						userId: that.mainid,
					},
					success: (res) => {
						uni.hideLoading(); //关闭加载动画
						console.log("获取街道代理数据",res);
						if (res.data.status == '200') {
							if (res.data.data.pages == this.pages) {
								this.more = "没有更多数据了";
								this.jiazai = true;
								this.zanwu = false;
								this.ismore = false;
							} else if (res.data.data.pages == 0) {
								this.more = "暂无数据";
								this.jiazai = false;
								this.zanwu = true;
								this.ismore = false;
							} else {
								this.more = "加载更多";
								this.jiazai = true;
								this.zanwu = false;
								this.ismore = true;
							}
							// if (res.data.data.records.length > 0) {
							// 	that.list = res.data.data.records;
							// }
							this.num = res.data.data.length;
							this.list = res.data.data;
							// this.list = [
							// 	{
							// 		name : ['ss']
							// 	}
							// ]
						}
					},
					fail: (error) => {
						uni.hideLoading();
						// this.checks = true
						console.log(error)
					}
				});
			}
		}
	}
</script>

<style>
	.cy_li_next {
		width: 3vw;
		height: auto;
		position: absolute;
		top: 10vw;
		right: 0vw;
	}
	
	.customStyle{
		color: #dd6161
	}
	
	.cy_sp {
		width: 100%;
		height: auto;
		float: left;
		display: flex;
		justify-content: space-between;
		padding: 2vw 0;
		border-top: 1px solid #F2F2F2;
		margin-top: 3vw;
	}

	.cy_sp_li {
		width: 33.33%;
		height: auto;
	}

	.cy_sp_li text {
		width: 100%;
		height: auto;
		float: left;
		text-align: center;
	}

	.cy_user {
		width: 90%;
		height: auto;
		display: block;
		float: left;
		margin: 2vw 5%;
		background: #F1C75E;
		border-radius: 1vw;
		padding: 6vw 4vw;
		box-shadow: 0px 0px 5px #F2F2F2;
	}

	.cy_user_tit {
		width: 100%;
		height: auto;
		line-height: 8vw;
		display: block;
		float: left;
		text-align: left;
	}

	.cy_user_into {
		width: 60%;
		height: auto;
		display: block;
		float: left;
		line-height: 7vw;
		display: block;
		float: left;
		margin: 6vw 0;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
	}

	.cy_user_input {
		width: 30vw;
		height: 9vw;
		display: block;
		float: right;
		background: url(../../static/img/but.png)no-repeat top center;
		background-size: 100%;
		text-align: center;
		line-height: 9vw;
		margin: 1vw 0;
	}

	.cy_user_into text {
		margin-right: 2vw;
	}

	.cy_list {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		margin: 2vw 0;
		/* box-shadow: 0px 0px 1vw #ccc; */
		/* border-radius: 2vw; */
		padding: 4vw;
		/* background: #fff; */
	}

	.cy_li {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		/* margin-bottom: 4vw; */
		border-top: 2vw solid #F2F2F2;
		padding: 4vw 0;
		position: relative;
	}

	/* .cy_li:last-child {
		border: none;
	} */
	.btn-box{
		float: right;
	}
	.cy_li1 {
		width: 95%;
		height: auto;
		display: block;
		float: left;
		margin-bottom: 4vw;
		margin-top: 4vw;
		margin-left: 5%;
		position: relative;
	}

	.cy_li1_before {
		width: 2vw;
		height: 2vw;
		display: block;
		float: left;
		position: absolute;
		background: #8A61DF;
		border-radius: 50%;
		top: 6.5vw;
		left: -4vw;
	}

	.cy_img {
		width: 14vw;
		height: 14vw;
		display: block;
		float: left;
		margin: 2vw 0;
		border: 1px solid #F2F2F2;
		border-radius: 2vw;
		overflow: hidden;
	}

	.cy_img image {
		width: 100%;
		height: 100%;
	}

	.cy_li_tit {
		width: 38%;
		height: 7vw;
		line-height: 7vw;
		display: block;
		float: left;
		padding-left: 3vw;
	}

	.cy_li_info {
		width: 72vw;
		height: 8vw;
		line-height: 8vw;
		display: block;
		float: left;
		padding: 0 3vw;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
	}
	.cy_li_info_flex{
		display: flex;
		justify-content: space-between;
	}
	.cy_li .cy_li_info image {
		width: 5vw;
		height: auto;
		border: none;
		margin: 0;
		margin-right: 2vw;
		margin-top: 1vw;    display: block;
    float: left;
	}

	.tri {
		text-align: right;
	}

	.cy_list_tit {
		width: 100%;
		height: 12vw;
		line-height: 12vw;
		display: block;
		float: left;
		/* text-align: center; */
		position: relative;
	}

	.cy_list_tit::before {
		content: ' ';
		width: 1vw;
		height: 5vw;
		background: #F1C75E;
		position: absolute;
		top: 3vw;
	}

	.cy_list_tit text {
		margin: 0 5vw;
	}

	.cy_list_tit text.cy_tita {
		border-bottom: 2px solid #F1C75E;
	}

	.cy_li_but {
		border: 1px solid #F1C75E;
		border-radius: 2vw;
		margin-left: 2vw;
		padding: 0 3vw;
		display: block;
		float: left;
		margin-top: 2vw;
	}
</style>
